<!-- menu -->
<div class="row clearfix">
<!-- 
<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation" id="">
    <div class="navbar-header" style="text-align:center;">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse" style="padding: 3px 15px;"> <span class="sr-only">Toggle navigation</span>
 <i class="glyphicon glyphicon-comment" style="font-size: 16px;color:#fff"></i>

        </button><div style="disply:table;text-align:center;padding-top: 15px;"><a href="" style="font-size: 18px;color:#ccc;">Some link here centered</a></div>

    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <li class="active"><a href="#">AAAA 1</a>

        </li>
        <li class="active"><a href="#">AAAA 2</a>

        </li>
        <li class="active"><a href="#">AAAA 3</a>

        </li>
    </div>
    <div class="collapse navbar-collapse navbar-ex2-collapse">
        <li class="active"><a href="#">BBBB 1</a>

        </li>
        <li class="active"><a href="#">BBBB 2</a>

        </li>
        <li class="active"><a href="#">BBBB 3</a>

        </li>
    </div>
</nav>

-->


<style id="jsbin-css">
body { padding-top: 70px }

@media (min-width:768px) { 
	.navbar-header { float: none }
	.navbar-left,
	.navbar-right { float: none !important }
	.navbar-toggle { display: block }
	.navbar-collapse {
	    border-top: 1px solid transparent;
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	    overflow: hidden;
	}
	.navbar-fixed-top {
	    top: 0;
	    border-width: 0 0 1px;
	}
	.navbar-collapse.collapse {
	    display: none!important;
	    visibility: hidden!important;
	    height: 0px!important;
	}
	.navbar-nav {
	    float: none!important;
	    margin-top: 7.5px;
	}
	.navbar-nav>li { float: none }
	.navbar-nav>li>a {
	    padding-top: 10px;
	    padding-bottom: 10px;
	}
	.navbar-collapse.in {
	    -webkit-transition-timing-function: ease;
	    -o-transition-timing-function: ease;
	    transition-timing-function: ease;
	    -webkit-transition-duration: .35s;
	    -o-transition-duration: .35s;
	    transition-duration: .35s;
	    -webkit-transition-property: height, visibility;
	    -o-transition-property: height, visibility;
	    transition-property: height, visibility;
	    display: block !important;
	    height: auto !important;
	    padding-bottom: 0;
	    overflow: visible !important;
	    visibility: visible !important;
	}
	.navbar-nav .open .dropdown-menu {
	    position: static;
	    float: none;
	    width: auto;
	    margin-top: 0;
	    background-color: transparent;
	    border: 0;
	    -webkit-box-shadow: none;
	    box-shadow: none;
	}
	.navbar-nav .open .dropdown-menu > li > a,
	.navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px }
	.navbar-nav .open .dropdown-menu > li > a { line-height: 20px }
	.navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-nav .open .dropdown-menu > li > a:focus { background-image: none }
	.navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777 }
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
	    color: #333;
	    background-color: transparent;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
	.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
	.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
	    color: #555;
	    background-color: #e7e7e7;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
	.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
	.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
	    color: #ccc;
	    background-color: transparent;
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #080808 }
	.navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808 }
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d }
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
	    color: #fff;
	    background-color: transparent;
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
	.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
	.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
	    color: #fff;
	    background-color: #080808;
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
	.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
	.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
	    color: #444;
	    background-color: transparent;
	}
}


/* demo only */

.footer-link-demo {position:fixed;bottom:0;right:0;left:0;text-align:center;padding:20px 0; }

</style>

	<!-- navbar-fixed-top -->
<div class="col-md-9 column">

		<div class="navbar nav-tab navbar-fixed-top  ">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
					<span class="icon-bar"></span> 
					<span class="icon-bar"></span> 
					<span 	class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="/" >
					Vamuai
				
				</a>
				<div class="ripple-wrapper">
				____________
				</div>
			</div>
			<div class="navbar-collapse collapse navbar-warning-collapse navbar-right">
				<ul class="nav navbar-nav">
					<li class="active"><a href="javascript:void(0)">Active</a></li>
					<li><a href="javascript:void(0)">Link</a></li>
					<li class="dropdown">
					   <a href="javascript:void(0)" 	class="dropdown-toggle" data-toggle="dropdown">Dropdown 
					       <b class="caret"></b>
					    </a>
						<ul class="dropdown-menu">
							<li><a href="javascript:void(0)">Action</a></li>
							<li><a href="javascript:void(0)">Another action</a></li>
							<li><a href="javascript:void(0)">Something else here</a></li>
							<li class="divider"></li>
							<li class="dropdown-header">Dropdown header</li>
							<li><a href="javascript:void(0)">Separated link</a></li>
							<li><a href="javascript:void(0)">One more separated link</a></li>
						</ul></li>
				</ul>
				<form class="navbar-form navbar-left">
					<div class="form-control-wrapper">
						<input type="text" class="form-control col-lg-8 empty" placeholder="Search">
						<span class="material-input"></span>
					</div>
				</form>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="javascript:void(0)">Link</a></li>
					
				</ul>
			</div>
		</div>
	</div>

</div>